<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>保洁区域任务列表</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="./css/comm.css" />
    <link rel="stylesheet" type="text/css" href="./css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="./css/plandevicetasklist.css" />
    <style>
        .aui-content.contentBox {
            margin-top: 7rem;
        }

        .top-header {
            padding: 10px 10px 5px 10px;
            display: flex;
            justify-content: space-around;
        }

        .top-bg-grey {
            width: 28%;
            background-color: #f0f0f0;
            text-align: center;
            border-radius: 4px;
            display: inline-block;
            padding: 6px 0px;
        }

        .top-bg-blue {
            background-color: #e7edfa;
            position: relative;
        }

        .top-bg-blue .rightcontent {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 20px;
        }

        .top-count {
            font-weight: 600;
            font-size: 16px;
        }

        .list_box_li {
            border-radius: 0;
            box-shadow: unset;
            margin-top: 0;
        }

        .text-grey {
            color: #999 !important;
        }

        .text-blue {
            color: #289FFF !important;
        }
        .equipment_box {
            height: auto;
            line-height: unset;
            padding: 15px 5px;
        }

        .list-content {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .tip-nostart {
            text-align: center;
            height: 32px;
            line-height: 32px;
            background: #d2ddf7;
            color: #3367d6;
            font-size: 13px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-content headerBox bgshadow" style="height: auto;">
            <div class="top-header">
                <div v-on:click="onClickStatus(item)" v-for="(item,index) in statusList" class="top-bg-grey"
                    v-bind:class="{'top-bg-blue':form.status==item.ID}">
                    <img v-if="form.status==item.ID" class="rightcontent" src="../image/isroomselects.png" />
                    <div class="text-grey" >{{item.Name}}</div>
                    <div class="top-count" >{{item.count}}</div>
                </div>
            </div>
            <!-- 搜索 -->
            <div class="aui-searchbar aui-margin-b-5" id="search">
                <div class="aui-searchbar-input aui-border-radius">
                    <i class="icon iconfont icon-sousuo"></i>
                    <input v-model="form.keywords" type="search" placeholder="搜索工作点名称" id="search-input">
                    <div class="aui-searchbar-clear-btn" style="top:12px">
                        <i class="icon iconfont icon-guanbi"></i>
                    </div>
                </div>
                <div class="aui-searchbar-btn" tapmode></div>
            </div>
        </div>

        <!-- 内容 -->
        <section class="aui-content contentBox">
            <div class="list_box">
                <div class="noinfo noinfo-mt" id="noorder" v-if="list.length==0">
                    <img src="../image/index/noinfomsg_icon.png" alt="" />
                    <h5><br />没有相关数据哦</h5>
                </div>
                <!-- loop -->
                <div v-if="IsStartStatus&&list.length>0" class="tip-nostart">任务将于<span
                        style="font-size: 13px;">{{PlanStartTime?PlanStartTime:'--'}}</span>开始，您可以提前开始工作。</div>
                <div v-if="list.length>0" v-for="(item,index) in list" class="list_box_li boxarea">
                    <div class="list_box_li_title equipment_box" v-on:click="do_view(item)"
                        v-bind:class="{'border-bottomLine':index<list.length-1}">
                        <div v-if="item.TaskStatus==3">
                            <div>
                                <div style="width: 100%;height: 30px;">
                                    <div class="equipment_name fl aui-ellipsis-1">
                                        <i class="icon iconfont icon-yidu text-grey aui-font-size-14 text-blue"></i>
                                        {{item.RegionName?item.RegionName:'--'}}
                                    </div>
                                </div>
                                <div v-if="item.TaskStatus==3" class="text-grey" style="margin-left: 20px;">
                                    <div class="list-content aui-margin-b-5">
                                        <div style="display: flex;">
                                            <img v-if="item.ComplateUserHeaderImg" :src="item.ComplateUserHeaderImg"
                                                class="aui-margin-r-10"
                                                style="border-radius: 50%;width: 20px;height: 20px;">
                                            <img v-if="!item.ComplateUserHeaderImg" src="../image/default.png"
                                                class="aui-margin-r-10"
                                                style="border-radius: 50%;width: 20px;height: 20px;">
                                            {{item.ComplateUserName?item.ComplateUserName:'--'}}
                                        </div>
                                        <div><span v-text="onDealTaskTime(item.TaskCompleteTime)"></span> 完成</div>
                                        <!-- <div><span>{{item.TaskCompleteTime}}</span> 完成</div> -->
                                    </div>
                                    <div v-if="item.GPSLocation" class="aui-margin-b-5"><i
                                            class="icon iconfont icon-addressdizhi aui-font-size-16 text-grey aui-margin-r-10"></i>{{item.GPSLocation}}
                                    </div>
                                    <div class="aui-margin-b-5 aui-ellipsis-2"><i
                                            class="icon iconfont icon-renwu aui-font-size-16 text-grey aui-margin-r-10"></i>{{item.TaskCompleteContent?item.TaskCompleteContent:'--'}}
                                    </div>
                                </div>
                                <div class="cl"></div>
                            </div>
                        </div>
                        <div v-if="item.TaskStatus!=3">
                            <div class="equipment_name fl aui-ellipsis-1">
                                <i class="icon iconfont icon-yidu text-grey aui-font-size-14 aui-margin-r-5"></i>
                                {{item.RegionName?item.RegionName:'--'}}
                            </div>
                            <div class="fr">
                                <!-- <div v-if="!item.CanPunchCard" class="text-grey">未开始</div> -->
                                <div class="text-grey">去完成</div>
                            </div>
                            <div class="cl"></div>
                        </div>

                    </div>
                </div>
                <div v-if="list.length>0" class="notodayList">
                    没有更多内容
                </div>
                <!-- loop -->
            </div>
        </section>

    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/aui-popup.js"></script>
<script type="text/javascript" src="js/bjlh_list.js"></script>

</html>